<div ng-init="init();" class="kmi-layout-content F0201-content">
    <div class="kmi-header-row" ng-class="{'disconection':disconnection}">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>
        <div class="header-title" ng-bind="'F0201.title' | translate"></div>
        <button ng-click="refresh();" class="refresh">
            <img src='image/smes_v340/W_Com_Reload_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="condition-panel">
                <div class="kmi-text-fields">
                    <label class="label" ng-bind="'F0201.area_no' | translate"></label>
                    <input ng-model="area_no" readonly="readonly" ng-click="loadAreaList();"></input>
                    <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                    <div style="flex: 3;"></div>
                    <label class="label" ng-bind="'F0201.refresh_frequency' | translate"></label>
                    <input class="value" ng-model="refresh_frequency" ng-click="input_time($event);" style="flex: 0 0 65px;"></input>
                    <label class="tip" ng-bind="'F0201.refresh_unit' | translate" style="top: 0px;"></label>
                </div>
            </div>
            <div class="kmi-list column-selector" kmi-scrollbar="1440px" column-selector-id="material_info_detail">
                <div class="kmi-list__header">
                    <div class="kmi-list__column head-controls" style="flex: 1;">
                        <div class="filter" ng-show="filterSH.demand_time">
                            <input ng-model="filter.demand_time">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.demand_time = false; filter.demand_time = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.demand_time">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.demand_time = true">search</i>
                            <label ng-bind="'F0201.list.column1' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'demand_time'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('demand_time')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex: 1;">
                        <div class="filter" ng-show="filterSH.mo_no">
                            <input ng-model="filter.mo_no">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.mo_no = false; filter.mo_no = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.mo_no">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.mo_no = true">search</i>
                            <label ng-bind="'F0201.list.column2' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'mo_no'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('mo_no')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex: 1;">
                        <div class="filter" ng-show="filterSH.op_no">
                            <input ng-model="filter.op_no">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.op_no = false; filter.op_no = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.op_no">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.op_no = true">search</i>
                            <label ng-bind="'F0201.list.column3' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'op_no'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('op_no')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex: 1;">
                        <div class="filter" ng-show="filterSH.machine_no">
                            <input ng-model="filter.machine_no">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.machine_no = false; filter.machine_no = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.machine_no">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.machine_no = true">search</i>
                            <label ng-bind="'F0201.list.column4' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'machine_no'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('machine_no')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex: 1;">
                        <div class="filter" ng-show="filterSH.position_no">
                            <input ng-model="filter.position_no">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.position_no = false; filter.position_no = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.position_no">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.position_no = true">search</i>
                            <label ng-bind="'F0201.list.column5' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'position_no'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('position_no')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex: 0 0 160px; min-width:160px;">
                        <div class="filter" ng-show="filterSH.material_no">
                            <input ng-model="filter.material_no">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.material_no = false; filter.material_no = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.material_no">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.material_no = true">search</i>
                            <label ng-bind="'F0201.list.column6' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'material_no'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('material_no')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.demand_qty">
                            <input ng-model="filter.demand_qty">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.demand_qty = false; filter.demand_qty = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.demand_qty">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.demand_qty = true">search</i>
                            <label ng-bind="'F0201.list.column7' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'demand_qty'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('demand_qty')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.demand_labor">
                            <input ng-model="filter.demand_labor">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.demand_labor = false; filter.demand_labor = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.demand_labor">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.demand_labor = true">search</i>
                            <label ng-bind="'F0201.list.column8' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'demand_labor'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('demand_labor')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.demand_source">
                            <input ng-model="filter.demand_source">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.demand_source = false; filter.demand_source = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.demand_source">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.demand_source = true">search</i>
                            <label ng-bind="'F0201.list.column9' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'demand_source'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('demand_source')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.feeding_qty">
                            <input ng-model="filter.feeding_qty">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.feeding_qty = false; filter.feeding_qty = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.feeding_qty">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.feeding_qty = true">search</i>
                            <label ng-bind="'F0201.list.column10' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'feeding_qty'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('feeding_qty')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.feeding_store_qty">
                            <input ng-model="filter.feeding_store_qty">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.feeding_store_qty = false; filter.feeding_store_qty = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.feeding_store_qty">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.feeding_store_qty = true">search</i>
                            <label ng-bind="'F0201.list.column11' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'feeding_store_qty'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('feeding_store_qty')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.wip_store_qty">
                            <input ng-model="filter.wip_store_qty">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.wip_store_qty = false; filter.wip_store_qty = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.wip_store_qty">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.wip_store_qty = true">search</i>
                            <label ng-bind="'F0201.list.column12' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'wip_store_qty'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('wip_store_qty')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.require_Date">
                            <input ng-model="filter.require_Date">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.require_Date = false; filter.require_Date = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.require_Date">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.require_Date = true">search</i>
                            <label ng-bind="'F0201.list.column13' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'require_Date'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('require_Date')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.to_InventoryNo">
                            <input ng-model="filter.to_InventoryNo">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="filterSH.to_InventoryNo = false; filter.to_InventoryNo = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.to_InventoryNo">
                            <i class="material-icons search" style="z-index:1;" ng-click="filterSH.to_InventoryNo = true">search</i>
                            <label ng-bind="'F0201.list.column14' | translate"></label>
                            <i class="material-icons" ng-show="order_by_mode.name == 'to_InventoryNo'">{{order_by_mode.sort?'&#xE5DB;':'&#xE5D8;'}}</i>
                            <div class="kmi-can-click" ng-click="orderbychange('to_InventoryNo')"></div>
                        </div>
                    </div>
                    <div class="kmi-list__column require width-fixed" style="flex:0 0 84px;"></div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in getPages(material_info_detail, PageConfig, filter) track by $index">
                        <div class="kmi-list__column column-border" style="flex: 0 0 160px;" ng-bind="item.demand_time"></div>
                        <div class="kmi-list__column column-border" style="flex: 0 0 160px;" ng-bind="item.mo_no"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.op_no"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.machine_no"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.position_no"></div>
                        <div class="kmi-list__column column-border" style="flex:0 0 160px; min-width:160px;" ng-bind="item.material_no"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.demand_qty"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.demand_labor"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="('F0201.demand_status_' + item.demand_source) | translate"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.feeding_qty"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.feeding_store_qty"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.wip_store_qty"></div>
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.require_Date"></div>                        
                        <!-- 20210105 modify by 外包 for M#82275: 设备维度增加线边仓的设置 -->
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.to_InventoryNo"></div>
                        <div class="kmi-list__column kmi-column-button" style="flex:0 0 84px;">
                            <label ng-bind="'F0201.confirm' | translate"></label>
                            <div class="kmi-can-click" ng-click="confirm(item, $event);"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-content">
                <div class="page-icon">
                    <img src="image/icons/dropleft.png"></img>
                    <div class="kmi-can-click"  ng-click="PageConfig.page = (PageConfig.page-1<0?0:PageConfig.page-1);"></div>
                </div>
                <label ng-bind="(PageConfig.page +1)+' / '+PageConfig.total_page"></label>
                <div class="page-icon">
                    <img src="image/icons/dropright.png"></img>
                    <div class="kmi-can-click"  ng-click="PageConfig.page = (PageConfig.page+1>(PageConfig.total_page-1)?(PageConfig.total_page-1):PageConfig.page+1);"></div>
                </div>
            </div>
        </div>
    </div>
</div>
